<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>全国省份切换</title>
    <!-- 引入 echarts.js -->
    <script src="js/echarts.js"></script>
    <!-- 引入中国地图数据 -->
    <script src="js/map/china.js"></script>

    <script src="js/jquery.min.js"></script>
  </head>
  <body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <button id="back">返回全国</button>
    <div id="main" style="width: 1100px; height: 800px"></div>
    <script type="text/javascript">
      var provinces = [
        "shanghai",
        "hebei",
        "shanxi",
        "neimenggu",
        "liaoning",
        "jilin",
        "heilongjiang",
        "jiangsu",
        "zhejiang",
        "anhui",
        "fujian",
        "jiangxi",
        "shandong",
        "henan",
        "hubei",
        "hunan",
        "guangdong",
        "guangxi",
        "hainan",
        "sichuan",
        "guizhou",
        "yunnan",
        "xizang",
        "shanxi1",
        "gansu",
        "qinghai",
        "ningxia",
        "xinjiang",
        "beijing",
        "tianjin",
        "chongqing",
        "xianggang",
        "aomen",
        "taiwan",
      ];

      var provincesText = [
        "上海",
        "河北",
        "山西",
        "内蒙古",
        "辽宁",
        "吉林",
        "黑龙江",
        "江苏",
        "浙江",
        "安徽",
        "福建",
        "江西",
        "山东",
        "河南",
        "湖北",
        "湖南",
        "广东",
        "广西",
        "海南",
        "四川",
        "贵州",
        "云南",
        "西藏",
        "陕西",
        "甘肃",
        "青海",
        "宁夏",
        "新疆",
        "北京",
        "天津",
        "重庆",
        "香港",
        "澳门",
        "台湾",
      ];

      var oBack = document.getElementById("back");

      var chart = echarts.init(document.getElementById("main"));

      var seriesData = [
        { name: "北京", value: 45 },
        { name: "天津", value: 54 },
        { name: "河北", value: 247 },
        { name: "山西", value: 2 },
        { name: "辽宁", value: 63 },
        { name: "黑龙江", value: 4 },
        { name: "上海", value: 773 },
        { name: "江苏", value: 2656 },
        { name: "浙江", value: 2866 },
        { name: "安徽", value: 576 },
        { name: "福建", value: 151 },
        { name: "江西", value: 175 },
        { name: "山东", value: 2000 },
        { name: "河南", value: 150 },
        { name: "湖北", value: 214 },
        { name: "湖南", value: 21 },
        { name: "广东", value: 3446 },
        { name: "广西", value: 18 },
        { name: "海南", value: 17 },
        { name: "重庆", value: 16 },
        { name: "四川", value: 16 },
        { name: "贵州", value: 8 },
        { name: "云南", value: 1 },
        { name: "陕西", value: 19 },
        { name: "甘肃", value: 1 },
        { name: "新疆", value: 37 },
      ];
      oBack.onclick = function () {
        initEcharts("china", "中国");
      };

      initEcharts("china", "中国");

      // 初始化echarts
      function initEcharts(pName, Chinese_) {
        var tmpSeriesData = pName === "china" ? seriesData : [];
        var option = {
          title: {
            text: Chinese_ || pName,
            top: "top",
            x: "center",
          },
          tooltip: {
            trigger: "item", // 触发类型，'item' 表示鼠标悬浮到图形上时触发
            formatter: "{b}: {c}", // 提示框内容的格式，{b} 是名称，{c} 是值
          },
          // dataRange
          visualMap: {
            show: true,
            min: 0,
            max: 3000,
            text: ["高", "低"],
            realtime: true,
            calculable: true,
            color: ["#28C9B7", "#E3F2D9"],
          },
          series: [
            {
              name: Chinese_ || pName,
              type: "map",
              map: pName,
              roam: false, //是否开启鼠标缩放和平移漫游
              show: true,
              zoom: 1.1,
              selectedMode: "single",
              label: {
                normal: {
                  show: true, // 显示省份名称或数量
                  formatter: function (params) {
                    if (pName === "china") {
                      // 当值为0时不显示省份名称，直接留空；否则显示省份名称
                      if (params.value && params.value > 0) {
                        return params.name;
                      }
                      return "";
                    } else {
                      return params.name;
                    }
                  },
                  fontSize: 12,
                  color: "#333",
                  position: "top", // 标签在地图内部
                },
                emphasis: {
                  show: true,
                  fontSize: "14",
                  fontWeight: "bold",
                },
              },
              tooltip: {
                formatter: function (params) {
                  // 当值为0时不显示信息，直接留空；否则显示数量
                  if (params.value && params.value > 0) {
                    return params.name + " : " + params.value;
                  }
                  return params.name;
                },
              },
              markArea: {
                label: {
                  show: true,
                },
                itemStyle: {
                  color: "blue",
                },
              },
              itemStyle: {
                normal: {
                  show: true,
                  color: "#fff",
                  areaColor: "#DAE3F3",
                  borderColor: "#fff", // 省份边界线颜色
                  borderWidth: 1, // 省份边界线宽度
                  position: "inside", // 标签在地图内部
                },
                emphasis: {
                  areaColor: null,
                  shadowOffsetX: 0,
                  shadowOffsetY: 0,
                  shadowBlur: 20,
                  borderWidth: 0,
                  shadowColor: "rgba(0, 0, 0, 0.5)",
                },
              },
              data: tmpSeriesData,
            },
          ],
        };
        chart.setOption(option);

        chart.off("click");
        if (pName === "china") {
          // 全国时，添加click 进入省级
          chart.on("click", function (param) {
            console.log(param.name);
            // 遍历取到provincesText 中的下标  去拿到对应的省js
            for (var i = 0; i < provincesText.length; i++) {
              if (param.name === provincesText[i]) {
                //显示对应省份的方法
                showProvince(provinces[i], provincesText[i]);
                break;
              }
            }
            if (param.componentType === "series") {
              var provinceName = param.name;
              $("#box").css("display", "block");
              $("#box-title").html(provinceName);
            }
          });
        } else {
          // 省份，添加双击 回退到全国
          chart.on("dblclick", function () {
            initEcharts("china", "中国");
          });
        }
      }

      // 展示对应的省
      function showProvince(pName, Chinese_) {
        //这写省份的js都是通过在线构建工具生成的，保存在本地，需要时加载使用即可，最好不要一开始全部直接引入。
        loadBdScript(
          "$" + pName + "JS",
          "./js/map/province/" + pName + ".js",
          function () {
            initEcharts(Chinese_);
          }
        );
      }

      // 加载对应的JS
      function loadBdScript(scriptId, url, callback) {
        var script = document.createElement("script");
        script.type = "text/javascript";
        if (script.readyState) {
          //IE
          script.onreadystatechange = function () {
            if (
              script.readyState === "loaded" ||
              script.readyState === "complete"
            ) {
              script.onreadystatechange = null;
              callback();
            }
          };
        } else {
          // Others
          script.onload = function () {
            callback();
          };
        }
        script.src = url;
        script.id = scriptId;
        document.getElementsByTagName("head")[0].appendChild(script);
      }
    </script>
  </body>
</html>
